<template>
  <h1 v-if="route.path==='/home/adddeps'">添加部门</h1>
  <h1 v-else>修改部门</h1>
  <el-form
    :model="form.data"
    :rules="rules"
    ref="ruleFormRef"
    :hide-required-asterisk="true"
    label-width="120px">

    <el-form-item label="部门名称" prop="departmentName">
      <el-input v-model="form.data.departmentName" placeholder="请输入部门的姓名" style="width: 218px;" />
    </el-form-item>



    <el-form-item>
      <el-button type="primary" @click="onSubmit(ruleFormRef)" v-if="route.path==='/home/adddeps'">添加</el-button>
      <el-button v-else type="primary" @click="onSubmit(ruleFormRef)">修改</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>

</template>

<script lang="js" setup>
import { onMounted, reactive, ref, toRaw, toRefs, unref } from "vue";
import {
  addDepartment,
  addEmployee,
  deleteEmployeeById,
  getDepartmentNameId, getDepartmentOne,
  getEmployeeOne,
  login, updateDepartments,
  updateEmployee
} from "@/utils/api";
import { getSalaryTotalAndType } from "@/utils/salaryRequest";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import router from "@/router";

const route = useRoute();

const form = reactive({
  data: {
    "createTIme": "",
    "departmentLeaderName": "",
    "departmentName": "",
    "updateTime": "",
    "departmentId":""
  }
});


//表单校验规则
const rules = reactive({
  departmentName: [
    { required: true, message: "请输入部门名称", trigger: "blur" },
    { min: 2, max: 5, message: "长度为2~5", trigger: "blur" }
  ],
  departmentLeaderName: [
    { required: true, message: "请输入部门负责人", trigger: "blur" },
    { min: 2, max: 5, message: "姓名长度为2~5", trigger: "blur" }
  ],
});

const departments = reactive({
  data: []
});

const ruleFormRef = ref();


//重置
const reset = () => {
  form.data = {};
};

onMounted(() => {
  if (route.path !== "/home/adddeps") {
    UpdateEmplyeeDate();
  }
});


//发送添加请求
const addDepartmentRequest = async (fromDate) => {
  let res = await addDepartment(fromDate);
  if (res.data) {
    ElMessage({
      type: "success",
      message: "添加成功成功"
    });
    router.push({
      path: "/home/deps"
    });
  }
};

//回显要修改部门的数据
const UpdateEmplyeeDate = async () => {
  let res = await getDepartmentOne(route.query.id);
  form.data = res.data
};


//提交表单的回调
const onSubmit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) {
      return false;
    } else {
      //发送请求
      if (route.path === "/home/adddeps") {
        addDepartmentRequest(form.data);

      } else {
        ElMessageBox.confirm(
          "确定要修改吗?",
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(async () => {
            //发送修改的请求
            let res = await updateDepartments(form.data);
            if (res.data) {
              ElMessage({
                type: "success",
                message: "修改成功"
              });
              router.push({
                path: "/home/deps"
              });
            } else {
              ElMessage({
                type: "error",
                message: "修改失败"
              });
            }
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "取消修改"
            });
          });
      }
    }
  });
};

</script>


<style scoped>
</style>